<template>
  <div class="setting">
    <el-card>
      <!--  tabs选项-->
      <el-tabs v-model="active">
        <el-tab-pane label="角色管理" name="first">
          <!--  新增按钮-->
          <el-button type="primary" size="mini" style="margin-bottom: 14px" round
                     @click="isShowDialog=true"
          >
            <i class="el-icon-plus"></i> 新增角色
          </el-button>
          <!--  表格结构-->
          <el-table :data="list" border v-loading="loading">
            <el-table-column label="序号" type="index" width="80px"></el-table-column>
            <el-table-column label="角色名" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="mini">分配权限</el-button>
                <el-button type="success" size="mini" @click="openEdit(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" @click="delClick(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--  分页组件-->
          <el-pagination style="text-align: right;margin-top: 40px;margin-right: 20px"
                         :current-page="currentPage"
                         :page-sizes="pageSizes"
                         :page-size="pageSize"
                         :total="total"
                         layout="total, sizes, prev, pager, next, jumper"
                         @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form label-width="100px" :model="companyInfo" disabled style="width:60%">
            <el-form-item label="企业名称 :">
              <el-input v-model="companyInfo.name"/>
            </el-form-item>
            <el-form-item label="公司地址 :">
              <el-input v-model="companyInfo.companyAddress"/>
            </el-form-item>
            <el-form-item label="公司电话 :">
              <el-input v-model="companyInfo.companyPhone"/>
            </el-form-item>
            <el-form-item label="邮箱 :">
              <el-input v-model="companyInfo.mailbox"/>
            </el-form-item>
            <el-form-item label="备注 : ">
              <el-input v-model="companyInfo.remarks"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </el-card>
    <!--    编辑面板-->
    <el-dialog :visible.sync="isShowDialog" title="编辑角色" @close="cancleClick">
      <el-form :model="form" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="form.description"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleClick">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addRoleApi, delRoleApi, editRoleApi, getCompanyInfoApi, getRoleListApi} from "@/api/setting";

export default {
  name: "setting",
  data() {
    return {
      //表单中的数据源
      form: {
        name: '', //名称
        description: ''  //描述
      },
      //校验规则
      rules: {
        name: {required: true, message: '角色名称不能为空', trigger: 'blur'},
        description: {required: true, message: '角色描述不能为空', trigger: 'blur'}
      },
      //是否显示编辑面板
      isShowDialog: false,
      //是否加载中
      loading: false,
      active: 'first',
      //  表格的数据源
      list: [
        {id: 1, name: 'Elsa', gender: '女'},
        {id: 2, name: 'const', gender: '男'},
        {id: 3, name: 'let', gender: '男'},
        {id: 4, name: 'var', gender: '女'}
      ],
      currentPage: 1,  //  当前页码
      pageSizes: [2, 4, 6, 10],  //页容量选项
      pageSize: 2,   //选中的页容量
      total: 0,  //数据总条数
      //  公司信息数据
      companyInfo: {}
    }
  },
  methods: {
    //得到公司信息
    async getCompanyInfo() {
      const res = await getCompanyInfoApi(this.$store.getters.userInfo.companyId)
      // console.log(res)
      this.companyInfo = res
    },
    //得到角色列表
    getRoleList() {
      this.loading = true
      setTimeout(async () => {
        const res = await getRoleListApi({page: this.currentPage, pagesize: this.pageSize})
        // console.log(res)
        this.list = res.rows
        this.total = res.total
        this.loading = false
      }, 500)
    },
    //  当前页码发生改变触发
    async handleCurrentChange(val) {
      this.currentPage = val
      this.getRoleList()
    },
    //页容量发送改变触发
    async handleSizeChange(val) {
      this.pageSize = val
      this.getRoleList()
    },
    //  打开修改面板
    openEdit(data) {
      //打开修改面板
      this.isShowDialog = true
      this.form = {
        ...data
      }
    },
    //  取消按钮
    cancleClick() {
      this.isShowDialog = false
      //  重置表单和校验结果
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        description: ''
      }
    },
    //  确定按钮
    confirmClick() {
      this.$refs.form.validate(async (isPass) => {
        if (isPass) {
          //  校验通过
          //  判断新增还是编辑
          if (this.form.id) {
            //  修改
            //  提交数据到服务器
            await editRoleApi(this.form)
          } else {
            //  新增
            await addRoleApi(this.form)
          }
          //  重新获取数据
          this.getRoleList()
          //  提示操作成功
          this.$message.success('操作成功')
          //  调用取消按钮  重置form和关闭面板
          this.cancleClick()
        }
      })
    },
    //  删除按钮
    async delClick(id) {
      //询问用户是否删除
      try {
        await this.$confirm('是否删除当前角色', '提示')
        //判断当前删除的数据是否为最后一条
        if (this.list.length === 1) {
          if (this.currentPage > 1) {
            this.currentPage--
          }
        }
        await delRoleApi(id)
        //  提示删除成功
        this.$message.success('删除成功')
        //  重新加载数据
        this.getRoleList()
      } catch {
        console.log('删除角色出错')
      }
    }
  },
  created() {
    //调用获取角色列表
    this.getRoleList()
    //  调用获取公司信息
    this.getCompanyInfo()
  }
}
</script>

<style scoped lang="scss">
.setting {
  padding: 30px;

  ::v-deep .el-tabs__content {
    padding: 40px 32px;
  }

  ::v-deep th {
    background-color: #fafafa;
    text-align: center;
  }

  ::v-deep td {
    text-align: center;
  }
}
</style>
